<template>
  <div>
    <van-nav-bar
      title="影院"
      fixed
      placeholder
      z-index="999"
      left-arrow
      @click-left="$router.back()"
    />
    <div class="atlisBox" @click="$router.push('/cinema')">
      <div class="left">
        <svg class="xl-icon" aria-hidden="true">
          <use xlink:href="#icon-dingwei" />
        </svg>
        <div style="font-size: 12px">地图</div>
      </div>
      <div class="center"></div>
      <div class="right">
        <div>{{ shopInfo.name }}</div>
        <div>{{ shopInfo.address }}</div>
        <div>
          {{ shopInfo.tel }}
          <van-icon name="phone" />
        </div>
        <van-icon name="arrow" class="you" />
      </div>
    </div>
    <!--   轮播 -->
    <div class="films-swiper">
      <div class="films-swiper-bg"><img :src="activeSwiperItem.img" alt="" /></div>
      <swiper
        ref="mySwiper"
        :options="swiperOptions"
        @slideChange="onSlideChange"
      >
        <swiper-slide v-for="item in banner" :key="item._id">
          <div class="films-swipe-box">
            <img class="films-swiper-img" :src="item.img" alt="" />
          </div>
        </swiper-slide>
      </swiper>
      <div class="triangle"></div>
    </div>
      <div class="banner-img-text">
        <p>{{ activeSwiperItem.name }}</p>
        <p>
          {{ activeSwiperItem.duration }}分钟 <span> | </span>
          <span>{{ activeSwiperItem.type }}</span>
        </p>
      </div>
    <!--  轮播结束 -->

        <div class="time">
      <!-- 天数 -->
      <div class="time-day">
        <ul>
          <li v-for="(item,index) in numberList" :key="item.day"
            @click="changeDate(index)"
          :class="{act:numberListActive==index}">
            <p>{{item.dayName}}</p>
            <p>{{item.day}}</p>
          </li>

        </ul>
      </div>
      <!-- 小时 -->
      <div class="time-day-hour" v-if="numberList[numberListActive]">


        <!-- 开始  -->
<!-- 循环 被选中的日期对应的数据  -->



        <div class="hour-box" 
        
        @click="linktoSeat(index)"
        v-for="(item,index) in numberList[numberListActive].list" :key="item._id">
          <!--  -->
          <div class="hour-min">
            <h2>{{item.time1}}</h2>
            <p>{{item.time2}}散场</p>
          </div>
          <!--  -->
          <div class="hour-text">
            <p>{{item.format}}</p>
            <p>{{item.roomName}}</p>
          </div>
          <!--  -->
          <div class="hour-price">
            <span class="price-one">￥{{item.oldPrice}}</span>
            <span>￥{{item.price}}</span>
            <p><span>朋友卡</span><span>￥{{item.cardPrice}}起</span></p>
          </div>
          <van-button type="danger">购票</van-button>
        </div>


   
      </div>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
    //  当前被选中的 轮播  item
    activeSwiperItem() { 
      return this.banner[this.swiperOptions.activeIndex]||{}
    },
  },
//  滑动  activeSwiperItem    _id也会变     this.getBookList()
  watch:{
    'activeSwiperItem._id':{
      handler(n,o){
        if(n){
            this.getBookList()
        }

      }
    }

  },
  data() {
    return {
      filmsId: "",
      shopId: "",
      banner: [],
      shopInfo: JSON.parse(localStorage.shopInfo) || {},
      swiperOptions: {
        slidesPerView: 4, //
        spaceBetween: 0,
        centeredSlides: true,
        activeIndex: 0,
      },
      //  场次
      numberList:[],
      numberListActive:0
    };
  },

  mounted() {
    this.filmsId = this.$route.query.filmsId; //  电影ID
    this.shopId = localStorage.getItem("shopId"); //  店铺的ID

    console.log("Current Swiper instance object", this.swiper);
    // this.swiper.slideTo(3, 1000, false);

    this.getFilmsList();
  },
  methods: {
    getFilmsList() {
      let { shopId, filmsId } = this;
      this.$http
        .get(`/films/pub/getList?shopId=${shopId}&status=1`)
        .then((res) => {
          console.log(res);
          if (res.code === 0) {
            this.banner = res.rows;
            //  找位置

            let index = this.banner.findIndex((v) => v._id == filmsId);

            this.swiper.slideTo(index, 1000, false);
            this.swiperOptions.activeIndex = index;
          } else {
            this.$toast(res.msg);
          }
        });
    },
    //  onSlideChange  swiper切换方法
    onSlideChange(e) {
      this.swiperOptions.activeIndex = this.swiper.activeIndex; //  可以优化
      this.numberListActive = 0
    },
    //  获取排班信息

    //  这个接口 是什么情况下调用 
    /// 轮播图初始化的时候调用一次 
    // 切换的时候 也需要调用
    getBookList(){

      let {shopId} = localStorage;
      let {_id:filmsId} = this.activeSwiperItem; //  获取到当前轮播图选中的那个电影的id
       let today_time = new Date(new Date().toLocaleDateString()).getTime();//   今天的,凌晨的时间戳
      this.$http.get('/book/pub/getList',{
        params:{
            filmsId,
            shopId,
            today_time
        }
      })
      .then(res=>{

        console.log(res)

         this.numberList = res.rows;

      
      })

    },
    //  日期的切换
    changeDate(index){
         this.numberListActive = index
    },
    linktoSeat(index){
      this.$router.push({
          name:'seat',
          query:{
              index:index
          }
        })

// url  query  容量有限   4M 
    sessionStorage.setItem('filmsList',JSON.stringify(this.numberList[this.numberListActive].list))

    }
  },
};
</script>

<style lang="scss">
.atlisBox {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #aaa;
  margin-top: 10px;
  .left {
    flex: 1;
    text-align: center;
    width: 50px;
    .icon {
      height: 16px;
      margin-bottom: 5px;
    }
  }
  .center {
    border-left: 1px solid #ccc;
    height: 45px;
    padding-left: 20px;
  }
  .right {
    font-size: 12px;
    flex: 5;
    line-height: 20px;
    position: relative;
    div:nth-of-type(1) {
      color: #000;
    }
    .you {
      position: absolute;
      top: 20px;
      right: 10px;
      font-size: 24px;
    }
  }
}

.films-swiper {
  width: 100%;
  height: 200px;
  // display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;

  &-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(30px);
    -webkit-filter: blur(18px);
    filter: blur(70px);
    img {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  }

  &-img {
    width: 80px;
    height: 104px;
  }
  .films-swipe-box {
    padding: 20px;
    transition: transform 0.3s;
  }
  // sanjiao
  .triangle {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
    width: 0px;
    height: 0px;
    border: 10px solid #fff;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top-color: transparent;
  }
}
.swiper-slide-active {
  transform: scale(1.2);
  transition: transform 0.3s;
}

.banner-img-text {
  margin-top: 10px;
  text-align: center;
  p:nth-child(2) {
    color: #ccc;
  }
}

// 时间
.time {
  margin-top: 30px;
  .time-day {
    margin-top: 20px;
    width: 240px;
    ul {
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-wrap: row;
      li {
        text-align: center;
        p:nth-child(2) {
          margin-top: 5px;
          text-align: center;
          line-height: 30px;
          width: 30px;
          height: 30px;
          border-radius: 50%;
          color: rgb(0, 0, 0);
          // background-color: red;
        }
      }
      li.act {
        color: red;
        p:nth-child(2) {
          background-color: red;
        }
      }
    }
  }
  .time-day-hour {
    margin-top: 20px;
    .hour-box {
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-wrap: row;
      border-top: 1px solid #ccc;
      padding: 15px 0;
      .hour-min {
        p {
          color: #ccc;
          font-size: 14px;
        }
      }
      .hour-text {
        color: #000;
        p:nth-child(2) {
          color: #ccc;
          font-size: 12px;
        }
      }
      .hour-price {
        .price-one {
          text-decoration: line-through;
        }
        span:nth-child(2) {
          color: red;
          font-size: 24px;
        }
        p {
          text-align: center;
          font-size: 12px;
          background-color: #ffffff;
          // padding: 3px;
          border: 1px solid #f1a23d;
          border-radius: 5px;
          color: #fff;
          span:nth-child(1) {
            background-color: #f1a23d;
            padding: 2px;
            border-radius: 5px 0 0 5px;
          }
          span:nth-child(2) {
            display: inline-block;
            background-color: #fff;
            color: #f1a23d;
            font-size: 12px;
            padding: 0 2px;
          }
        }
      }
    }
  }
  .van-button--normal {
    border-radius: 20px 20px;
  }
}
</style>